<template>
  <div class="w-full">
    <app-header />
    
    <video ref="videoPlayer" class="w-full object-cover" autoplay loop muted preload="auto" x5-playsinline="true" x5-video-player-type="h5" playsinline="true" webkit-playsinline="true" x5-video-player-fullscreen="true" x-webkit-airplay="true">
      <source :src="video?.videoUrl" type="video/mp4">
    </video>

    <p class="p-2">{{ video?.title }}</p>
    <div class="px-2 flex items-center gap-6 text-gray-400 text-sm">
      <span>点击{{ video?.views }}</span>
      <span>点赞{{ video?.likes }}</span>
      <span>发布时间：{{ video?.uploadDate }}</span>
    </div>
    <div class="p-2 flex items-center gap-3 text-sm">
      <span class="bg-gray-100 px-2 py-1 rounded-md text-gray-500" v-for="tag in video?.tags">{{ tag }}</span>
    </div>
    <div>
      <img :src="video?.coverUrl" class="w-full block" alt=""></img>
    </div>
    <app-footer />
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { data: video } = await useFetch(`/api/video/${route.params.id}`)

// 设置SEO
useSeoMeta({
  title: video.value?.title,
  description: video.value?.description
})

const videoPlayer = ref<HTMLVideoElement | null>(null)

onActivated(() => {
  if (videoPlayer.value) {
    videoPlayer.value.play()
  }
})

</script>

<style scoped>

</style>